<template>
	<view class="page">
		<view class="headView">
			<view class="headImageView">
				<image class="headImage" src="/static/staff_index/login/head.png" mode="scaleToFill"></image>
			</view>
			<view class="titleText">员工登录</view>
			<view class="contentText">请输入您的账号和密码</view>
			<form @submit="login">
				<input class="input" type="text" placeholder="手机号" v-model="username" />
				<input class="input" type="password" placeholder="密码" v-model="password" />
				<button class="authBtn" type="primary" form-type="submit">登录</button>
			</form>
		</view>
	</view>
</template>

<script>
	import {stafflogin}from'@/request/ap_staff.js'
	export default {
		data() {
			return {
				username: '',
				password: ''
			};
		},
		onShow() {
			let vm = uni.getStorageSync('staffInfo');
			console.log(vm)
			if (vm != '') {
				uni.redirectTo({
					url: '/pages/staff/index/index'
				});
			}
		},
		methods: {
			login(event) {
				// 阻止表单默认提交行为
				event.preventDefault();
				stafflogin({
					"username": this.username,
					"password": this.password
				}).then((res) => {
					if (res.data.code === 200) {
						uni.setStorageSync('staffInfo', res.data.data);
						uni.redirectTo({
							url: '/pages/staff/index/index'
						});
					}else if(res.data.code === 300 ){
						// 登录失败，显示错误信息
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}else {
						// 登录失败，显示错误信息
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	};
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		background-color: #f7f7f7;
		padding: 0 20px;
	}

	.headView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
	}

	.headImageView {
		position: relative;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		overflow: hidden;
		border: 5px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}

	.headImage {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.titleText {
		margin-top: 20px;
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.contentText {
		margin-top: 10px;
		font-size: 16px;
		color: #666;
		max-width: 300px;
		text-align: center;
	}

	.authBtn {
		margin-top: 30px;
		padding: 10px 0;
		font-size: 18px;
		background-color: #007aff;
		border: none;
		border-radius: 5px;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.authBtn:active {
		background-color: #0052cc;
	}

	.input {
		width: 100%;
		margin-top: 15px;
		/* padding: 12px; */
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: #fff;
		/* 确保输入框背景色不是透明 */
		pointer-events: auto;
		/* 确保没有被设置为none */
	}

	.input::placeholder {
		color: #999;
	}
</style>